<template>
	<view class="content userC">
		<z-paging ref="paging" @onRefresh="queryList" show-refresher-update-time fixed
			:refresher-end-bounce-enabled="false" :safe-area-inset-bottom="true" :refresher-only="true">
			<!-- 公司信息 -->
			<view class="user-company font40" slot="top">
				<text>川东钻探公司</text>
			</view>
			<view class="user-info boxS">
				<view class="info-photo" @click="changeHead">
					<image :src="!userInfo.cover?'../../static/img/photo.png':userInfo.cover">
					</image>
				</view>
				<view class="info-name font34">
					{{userInfo.user_name!=''?userInfo.user_name:'--'}}
				</view>
				<view class="info-erp font24">
					{{userInfo.user_id || '--'}}
				</view>
			</view>
			<view class="user-type flex-between boxS">
				<view class="type-itm">
					<view class="type-text1 font28">
						{{userInfo.ou_name && userInfo.ou_name!='' ?userInfo.ou_name:'--'}}
					</view>
					<view class="type-text2 font20">
						部门名称
					</view>
				</view>
				<view class="type-itm">
					<view class="type-text1 font28">
						{{userInfo.rank_name && userInfo.rank_name!='' ?userInfo.rank_name:'--'}}
					</view>
					<view class="type-text2 font20">
						职级名称
					</view>
				</view>
				<view class="type-itm">
					<view class="type-text1 font28">
						{{userInfo.post_name && userInfo.post_name!='' ?userInfo.post_name:'--'}}
					</view>
					<view class="type-text2 font20">
						岗位名称
					</view>
				</view>
			</view>
			<view class="user-phone font26 flex-left boxS">
				<image src="../../static/img/user_ico1.png" mode="widthFix"></image>
				<text>电话：{{userInfo.mobile && userInfo.mobile!='' ?userInfo.mobile:'暂无'}}</text>
			</view>

			<view class="login-out" v-if="false">
				<view class="out-btn" @click="dialogToggle('info')">
					退出登录
				</view>
			</view>
		</z-paging>

		<lzLoading :showloading='showLoading'></lzLoading>
		<!-- 提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'info'" title="退出登录" content="是否退出当前登录账号？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 更换头像 -->
		<uni-popup ref="changeHead" type="dialog">
			<view style="width:580rpx;border-radius: 10rpx;background-color: #fff;padding: 30rpx;">
				<h3>修改头像</h3>
				<view class="submit-info3 boxS" style="padding-right: 20%;">
					<uni-file-picker limit="1" title="(最多可上传1张)" :auto-upload="false" @select="select" fileMediatype="image"
						@progress="progress" @delete="deletes" />
				</view>
				<!-- 操作 -->
				<view class="detail-btn boxS flex-between">
					<view class="btn1 font32" hover-class="btns" @click="submitInfo">
						保存
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				imgList: [],
				showLoading: true,
				userInfo: '', //用户信息
			}
		},
		onLoad() {

		},
		onShow() {
			// this.userInfo = uni.getStorageSync("USERINFO")
			Promise.all([this.getUserInfo()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 1000)
			})
		},
		methods: {
			submitInfo() {
				console.log(this.imgList, 109)
				if (!this.imgList || !this.imgList.length) {
					uni.showToast({
						title: "请上传新头像",
						icon: "none"
					})
					return
				}
				this.$api.uploadFile(this.imgList, (resoult) => {
					if (resoult && resoult.length) {
						//表单提交
						this.$api.changeHead({
							cover: resoult[0],
						}, true, (res) => {
							uni.showToast({
								title: '更改成功',
							})
							this.getUserInfo()
							this.$refs.changeHead.close()
							uni.hideLoading()
						})
					} else {
						uni.showToast({
							title: '图片上传失败',
						})
					}
				})
			},
			// 打开头像弹窗
			changeHead() {
				this.$refs.changeHead.open()
			},
			//图片上传成功
			select(res) {
				this.imgList.push(...res.tempFilePaths)
			},
			//移除图片
			deletes(res) {
				this.imgList.splice(res.tempFilePath, 1)
			},
			//图片上传进度
			progress(e) {
				console.log('上传进度', e)
			},
			queryList(pageNo, pageSize) {
				let sett = setTimeout(() => {
					Promise.all([this.getUserInfo()]).then((t) => {
						this.$refs.paging.complete(false);
					})
				}, 1000)
			},

			//获取用户信息
			getUserInfo() {
				return new Promise((resolve, reject) => {
					this.$api.getUserInfo({}, true, (res) => {
						this.userInfo = res.user_info
						resolve("success")
					})
				})
			},

			// 打开对话框
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			//  关闭对话框
			dialogClose() {
				console.log('点击关闭')
			},
			// 确认
			dialogConfirm(val) {
				//保存用户登录状态
				uni.setStorageSync("TOKEN", '')
				uni.setStorageSync("USERINFO", '')
				uni.showToast({
					title: "退出成功",
					icon: "success"
				})
				let sett = setTimeout(() => {
					uni.switchTab({
						url: '../index/index'
					})
				}, 1000)
			},

			//页面跳转
			urllink(url) {
				// 跳转到消息
				if (url == 'msg') {
					uni.navigateTo({
						url: "../message/index"
					})
				}
				//跳转到统计
				if (url == 'statistics') {
					uni.navigateTo({
						url: "../statistics/index"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userC {
		letter-spacing: 1rpx;

		.user-company {
			width: 92%;
			padding: 70rpx 4% 30rpx 4%;
			background: #fff;
			text-align: left;
			font-weight: bold;
		}

		.user-info {
			width: 84%;
			padding: 30rpx 4%;
			color: #454545;
			margin: 30rpx auto;
			background: #fff;
			border-radius: 15rpx;
			text-align: center;

			.info-photo {
				width: 160rpx;
				height: 160rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin: auto;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.info-name {
				font-weight: bold;
				color: #454545;
				text-align: center;
				padding: 25rpx 0;
			}

			.info-erp {
				color: #008AFF;
				padding: 10rpx 30rpx;
				background: #E7F4FF;
				border-radius: 24px;
				display: inline-block;
				margin: auto;
			}
		}

		.user-type {
			width: 84%;
			padding: 30rpx 4%;
			color: #454545;
			margin: 30rpx auto;
			background: #fff;
			border-radius: 15rpx;

			.type-itm {
				width: 33%;
				text-align: center;

				.type-text1 {
					font-weight: bold;
					color: #454545;
				}

				.type-text2 {
					color: #74737A;
					margin-top: 10rpx;
				}
			}
		}

		.user-phone {
			width: 84%;
			padding: 30rpx 4%;
			color: #454545;
			margin: 30rpx auto;
			background: #fff;
			border-radius: 15rpx;
			font-weight: bold;
			color: #454545;
			margin-top: 30rpx;

			image {
				width: 28rpx;
				margin-right: 25rpx;
				margin-top: 2rpx;
			}
		}
	}

	.login-out {
		position: fixed;
		bottom: 130rpx;
		left: 0;
		width: 100%;

		.out-btn {
			margin: auto;
			width: 320rpx;
			height: 88rpx;
			border: 1rpx solid #C4C4C4;
			border-radius: 7rpx;
			line-height: 88rpx;
			text-align: center;
			font-weight: bold;
			color: #787878;
			background: #fff;
		}
	}

	.detail-btn {
		width: 92%;
		padding: 30rpx 4%;
		background: #fff;

		.btn1 {
			width: 100%;
			background: #008AFF;
			border-radius: 44rpx;
			text-align: center;
			font-weight: bold;
			color: #FFFFFF;
			padding: 20rpx 0;
		}
	}
</style>
